<template>
  <div class="css">
    <div class="wrapper-content">
      <div class="css-content parallax-hovering-1">
        <!--图像的类型对错觉很重要，使用以主元素为中心、背景均匀的图像-->
        <img src="https://images.unsplash.com/photo-1685596411716-190440660e4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="the back of random person">
        <img src="https://images.unsplash.com/photo-1685316494198-a71c8344aa9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="an eagle" style="--f:.12;--r:5px">
        <img src="https://images.unsplash.com/photo-1683470432347-7b40520fb583?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="a cup of something to drink, probably some tea" style="--f:.08;--r:20px">
      </div>
      <div class="css-content parallax-hovering-2">
        <figure class="snip1573">
          <img src="https://images.unsplash.com/photo-1685596411716-190440660e4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="the back of random person">
          <figcaption>
            <h3>Buy Now</h3>
          </figcaption>
          <a href="#"></a>
        </figure>
        <figure class="snip1573 hover">
          <img src="https://images.unsplash.com/photo-1685596411716-190440660e4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="the back of random person">
          <figcaption>
            <h3>Read More</h3>
          </figcaption>
          <a href="#"></a>
        </figure>
        <figure class="snip1573">
          <img src="https://images.unsplash.com/photo-1685596411716-190440660e4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="the back of random person">
          <figcaption>
            <h3>Join Us</h3>
          </figcaption>
          <a href="#"></a>
        </figure>
      </div>
      <div class="css-content parallax-hovering-3">
        <figure class="snip1477">
          <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="sample38" />
          <div class="title">
            <div>
              <h2>Penny</h2>
              <h4>Tool</h4>
            </div>
          </div>
          <figcaption>
            <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
          </figcaption>
          <a href="#"></a>
        </figure>
        <figure class="snip1477 hover"><img src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2264&q=80" alt="sample91" />
          <div class="title">
            <div>
              <h2>Ingredia</h2>
              <h4>Nutrisha</h4>
            </div>
          </div>
          <figcaption>
            <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
          </figcaption>
          <a href="#"></a>
        </figure>
        <figure class="snip1477"><img src="https://images.unsplash.com/photo-1560419450-a53fe3b90211?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="sample35" />
          <div class="title">
            <div>
              <h2>Hans</h2>
              <h4>Down</h4>
            </div>
          </div>
          <figcaption>
            <p>The only skills I have the patience to learn are those that have no real application in life. </p>
          </figcaption>
          <a href="#"></a>
        </figure>
      </div>
      <div class="css-content parallax-hovering-4">
        <a class="cta">
          <span>NEXT</span>
          <span>
            <svg width="66px" height="43px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path class="one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
                <path class="two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
                <path class="three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
              </g>
            </svg>
          </span>
        </a>
      </div>
      <div class="css-content parallax-hovering-5">
        <p>
            Check out
            <a href="javascript:;">
                the link
                <svg viewBox="0 0 70 36">
                    <path d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" />
                </svg>
            </a>
            here
        </p>
      </div>
      <div class="css-content parallax-hovering-6">
        <ul>
          <li style="--clr:#00ade1">
            <a href="#" data-text=" css"> css </a>
          </li>
          <li style="--clr:#ff6492">
            <a href="#" data-text=" About"> About </a>
          </li>
          <li style="--clr:#ffdd1c">
            <a href="#" data-text=" Services"> Services </a>
          </li>
          <li style="--clr:#00dc82">
            <a href="#" data-text=" Blog"> Blog </a>
          </li>
          <li style="--clr:#dc00d4">
            <a href="#" data-text=" Contact"> Contact </a>
          </li>
        </ul>
      </div>
      <div class="css-content parallax-hovering-7" ref="pageX">
        <div class="page__x" id="pageX">
          <div class="cards">
            <h3>Movies</h3>
            <h1>Popular</h1>
            <!-- 幽灵公主 -->
            <div class="card princess-mononoke">
              <div class="card__bg"></div>
              <img class="card__img" :src="images.dr_mono" />
              <div class="card__text">
                <p class="card__title">Princess Mononoke</p>
              </div>
            </div>
            <!-- 千与千寻 -->
            <div class="card spirited-away">
              <div class="card__bg"></div>
              <img class="card__img" :src="images.dr_chihiro" />
              <div class="card__text">
                <p class="card__title">Spirited Away</p>
              </div>
            </div>
            <!-- 哈尔的移动城堡 -->
            <div class="card howl-s-moving-castle">
              <div class="card__bg"></div>
              <img class="card__img" :src="images.dr_howlcastle" />
              <div class="card__text">
                <p class="card__title">Howl's Moving Castle</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="css-content parallax-hovering-8">
        <div class="galaxy-button">
          <button>
            <span class="spark"></span>
            <span class="backdrop"></span>
            <span class="galaxy__container">
              <span class="star star--static" v-for="i in 4" :key="i"></span>
            </span>
            <span class="galaxy">
              <span class="galaxy__ring">
                <span class="star" v-for="i in 20" :key="i"></span>
              </span>
            </span>
            <span class="text">Explore</span>
          </button>
          <div class="bodydrop"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

const images: any = reactive({
  dr_mono: new URL(`../../../assets/images/3dr_mono.png`, import.meta.url).href,
  dr_chihiro: new URL(`../../../assets/images/3dr_chihiro.png`, import.meta.url).href,
  dr_howlcastle: new URL(`../../../assets/images/3dr_howlcastle.png`, import.meta.url).href,
});

const pageX:any = ref(null);

const schover = () => {
  // 卡片容器
  const cards:any = document.querySelector('.cards')
  // 所有图片
  const images:any = document.querySelectorAll('.card__img')
  // 所有背景
  const backgrounds:any = document.querySelectorAll('.card__bg')

  console.log('pageX.value', pageX.value)

  // 旋转角度系数
  let range = 40

  // 旋转公式（返回-20 ~ 20，保留1为小数）
  let calcValue = (a: number, b: number) => (a / b * range - range / 2).toFixed(1)

  // 默认返回 undefined
  let timeout:any = null

  // 视差动画函数
  // e：鼠标移动事件的参数
  function parallax(e: { x: any; y: any; }) {
    let x = e.x // 指针x轴位置
    let y = e.y // 指针y轴位置

    // 如果 timeout 已经存在，就取消一个先前通过调用 window.requestAnimationFrame() 方法添加到计划中的动画帧请求。
    if (timeout) {
      // 这是一个实验中的功能，此功能某些浏览器尚在开发中
      window.cancelAnimationFrame(timeout);
    }

    // 在下次重绘之前调用指定的回调函数更新动画
    timeout = window.requestAnimationFrame(function () {
      // 通过 calcValue 根据鼠标当前位置和容器宽高比计算得出的值
      let xValue:any = calcValue(x, pageX.value.offsetWidth)
      let yValue:any = calcValue(y, pageX.value.offsetHeight)

      // 设置卡片容器的旋转角度
      cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";

      // 设置所有图片的位移
      images.forEach((item: { style: { transform: string; }; }) => {
        item.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)"
      })

      // 设置所有背景图的位置
      backgrounds.forEach((item: { style: { backgroundPosition: string; }; }) => {
        item.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px"
      })
    })
  }

  pageX.value.addEventListener('mouseover', () => {
    pageX.value.addEventListener('mousemove', parallax, false)
  }, false)

  pageX.value.removeEventListener('mousemove', parallax)
}


const buttonStar = () => {
  const RANDOM = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
  const PARTICLES = document.querySelectorAll('.star');
  PARTICLES.forEach(P => {
    P.setAttribute('style', `
      --angle: ${RANDOM(0, 360)};
      --duration: ${RANDOM(6, 20)};
      --delay: ${RANDOM(1, 10)};
      --alpha: ${RANDOM(40, 90) / 100};
      --size: ${RANDOM(2, 6)};
      --distance: ${RANDOM(40, 200)};
    `);
  });
}
nextTick(()=>{
  schover();
  buttonStar();
})
</script>

<style lang="scss" scoped>
@import url(../index.scss);
.css {
  .css-content{
    min-height: 50%;
    background: #C44D58;
    background-color: #212121;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    margin: var(--rem-20);
    gap: var(--rem-30);
    &.parallax-hovering-1{
      img {
        --f: .1; /* the parallax factor (the smaller the better) */
        --r: 10px; /* radius */
        --_f: calc(100%*var(--f)/(1 + var(--f)));
        --_a: calc(90deg*var(--f));
        width: 250px; /* the image size */
        aspect-ratio: calc(1 + var(--f));
        object-fit: cover;
        clip-path: inset(0 var(--_f) 0 0 round var(--r));
        transform: perspective(400px) var(--_t,rotateY(var(--_a)));
        transition: .5s;
        cursor: pointer;
      }
      img:hover {
        clip-path: inset(0 0 0 var(--_f) round var(--r));
        --_t:translateX(calc(-1*var(--_f))) rotateY(calc(-1*var(--_a)))
      }
    }
    &.parallax-hovering-2{
      .snip1573 {
        background-color: #000;
        display: inline-block;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        margin: 10px 7px;
        max-width: 315px;
        min-width: 230px;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 100%;
      }

      .snip1573 * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
      }

      .snip1573:before,
      .snip1573:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        background-color: #000000;
        border-left: 3px solid #fff;
        border-right: 3px solid #fff;
        content: '';
        opacity: 0.9;
        z-index: 1;
      }

      .snip1573:before {
        -webkit-transform: skew(45deg) translateX(-155%);
        transform: skew(45deg) translateX(-155%);
      }

      .snip1573:after {
        -webkit-transform: skew(45deg) translateX(155%);
        transform: skew(45deg) translateX(155%);
      }

      .snip1573 img {
        backface-visibility: hidden;
        max-width: 100%;
        vertical-align: top;
      }

      .snip1573 figcaption {
        top: 50%;
        left: 50%;
        position: absolute;
        z-index: 2;
        -webkit-transform: translate(-50%, -50%) scale(0.5);
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
        -webkit-box-shadow: 0 0 10px #000000;
        box-shadow: 0 0 10px #000000;
      }

      .snip1573 h3 {
        background-color: #000000;
        border: 2px solid #fff;
        color: #fff;
        font-size: 1em;
        font-weight: 600;
        letter-spacing: 1px;
        margin: 0;
        padding: 5px 10px;
        text-transform: uppercase;
      }

      .snip1573 a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
      }

      .snip1573:hover > img,
      .snip1573.hover > img {
        opacity: 0.5;
      }

      .snip1573:hover:before,
      .snip1573.hover:before {
        -webkit-transform: skew(45deg) translateX(-55%);
        transform: skew(45deg) translateX(-55%);
      }

      .snip1573:hover:after,
      .snip1573.hover:after {
        -webkit-transform: skew(45deg) translateX(55%);
        transform: skew(45deg) translateX(55%);
      }

      .snip1573:hover figcaption,
      .snip1573.hover figcaption {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }
    &.parallax-hovering-3{
      figure.snip1477 {
        font-family: 'Raleway', Arial, sans-serif;
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 230px;
        max-width: 315px;
        width: 100%;
        color: #ffffff;
        text-align: center;
        font-size: 16px;
        background-color: #000000;
      }
      figure.snip1477 *,
      figure.snip1477 *:before,
      figure.snip1477 *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.55s ease;
        transition: all 0.55s ease;
      }
      figure.snip1477 img {
        max-width: 100%;
        backface-visibility: hidden;
        vertical-align: top;
        opacity: 0.9;
      }
      figure.snip1477 .title {
        position: absolute;
        top: 58%;
        left: 25px;
        padding: 5px 10px 10px;
      }
      figure.snip1477 .title:before,
      figure.snip1477 .title:after {
        height: 2px;
        width: 400px;
        position: absolute;
        content: '';
        background-color: #ffffff;
      }
      figure.snip1477 .title:before {
        top: 0;
        left: 10px;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
      }
      figure.snip1477 .title:after {
        bottom: 0;
        right: 10px;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      figure.snip1477 .title div:before,
      figure.snip1477 .title div:after {
        width: 2px;
        height: 300px;
        position: absolute;
        content: '';
        background-color: #ffffff;
      }
      figure.snip1477 .title div:before {
        top: 10px;
        right: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
      }
      figure.snip1477 .title div:after {
        bottom: 10px;
        left: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
      }
      figure.snip1477 h2,
      figure.snip1477 h4 {
        margin: 0;
        text-transform: uppercase;
      }
      figure.snip1477 h2 {
        font-weight: 400;
      }
      figure.snip1477 h4 {
        display: block;
        font-weight: 700;
        background-color: #ffffff;
        padding: 5px 10px;
        color: #000000;
      }
      figure.snip1477 figcaption {
        position: absolute;
        bottom: 42%;
        left: 25px;
        text-align: left;
        opacity: 0;
        padding: 5px 60px 5px 10px;
        font-size: 0.8em;
        font-weight: 500;
        letter-spacing: 1.5px;
      }
      figure.snip1477 figcaption p {
        margin: 0;
      }
      figure.snip1477 a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
      figure.snip1477:hover img,
      figure.snip1477.hover img {
        zoom: 1;
        filter: alpha(opacity=35);
        -webkit-opacity: 0.35;
        opacity: 0.35;
      }
      figure.snip1477:hover .title:before,
      figure.snip1477.hover .title:before,
      figure.snip1477:hover .title:after,
      figure.snip1477.hover .title:after,
      figure.snip1477:hover .title div:before,
      figure.snip1477.hover .title div:before,
      figure.snip1477:hover .title div:after,
      figure.snip1477.hover .title div:after {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      figure.snip1477:hover .title:before,
      figure.snip1477.hover .title:before,
      figure.snip1477:hover .title:after,
      figure.snip1477.hover .title:after {
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
      }
      figure.snip1477:hover figcaption,
      figure.snip1477.hover figcaption {
        opacity: 1;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
      }
    }
    &.parallax-hovering-4{
      .cta {
          display: flex;
          padding: 10px 45px;
          text-decoration: none;
          font-family: 'Poppins', sans-serif;
          font-size: 40px;
          color: white;
          background: #6225E6;
          transition: 1s;
          box-shadow: 6px 6px 0 black;
          -webkit-transform: skewX(-15deg);
                  transform: skewX(-15deg);
      }

      .cta:focus {
        outline: none;
      }

      .cta:hover {
          transition: 0.5s;
          box-shadow: 10px 10px 0 #FBC638;
      }

      .cta span:nth-child(2) {
          transition: 0.5s;
          margin-right: 0px;
      }

      .cta:hover  span:nth-child(2) {
          transition: 0.5s;
          margin-right: 45px;
      }

        span {
          -webkit-transform: skewX(15deg);
                  transform: skewX(15deg)
        }

        span:nth-child(2) {
          width: 20px;
          margin-left: 30px;
          position: relative;
          top: 12%;
        }

      /**************SVG****************/

      path.one {
          transition: 0.4s;
          -webkit-transform: translateX(-60%);
                  transform: translateX(-60%);
      }

      path.two {
          transition: 0.5s;
          -webkit-transform: translateX(-30%);
                  transform: translateX(-30%);
      }

      .cta:hover path.three {
          -webkit-animation: color_anim 1s infinite 0.2s;
                  animation: color_anim 1s infinite 0.2s;
      }

      .cta:hover path.one {
          -webkit-transform: translateX(0%);
                  transform: translateX(0%);
          -webkit-animation: color_anim 1s infinite 0.6s;
                  animation: color_anim 1s infinite 0.6s;
      }

      .cta:hover path.two {
          -webkit-transform: translateX(0%);
                  transform: translateX(0%);
          -webkit-animation: color_anim 1s infinite 0.4s;
                  animation: color_anim 1s infinite 0.4s;
      }

      /* SVG animations */

      @-webkit-keyframes color_anim {
          0% {
              fill: white;
          }
          50% {
              fill: #FBC638;
          }
          100% {
              fill: white;
          }
      }

      @keyframes color_anim {
          0% {
              fill: white;
          }
          50% {
              fill: #FBC638;
          }
          100% {
              fill: white;
          }
      }
    }
    &.parallax-hovering-5{
      --text: #B5C4FD;
      --line: #BBC1E1;
      --line-active: #275EFE;
      p {
        font-size: 18px;
        margin: 0;
        color: var(--text);
      }
      p a {
        display: inline-block;
        position: relative;
        text-decoration: none;
        color: inherit;
      }
      p a svg {
        width: 76px;
        height: 40px;
        position: absolute;
        left: 50%;
        bottom: 0;
        -webkit-transform: translate(-50%, 7px) translateZ(0);
                transform: translate(-50%, 7px) translateZ(0);
        fill: none;
        stroke: var(--stroke, var(--line));
        stroke-linecap: round;
        stroke-width: 2px;
        stroke-dasharray: var(--offset, 69px) 278px;
        stroke-dashoffset: 361px;
        -webkit-transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
        transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
      }
      p a:hover {
        --stroke: var(--line-active);
        --stroke-delay: .1s;
        --offset: 180px;
      }


    }
    &.parallax-hovering-6{
      ul {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--rem-30);
      }
      ul li {
        position: relative;
        list-style: none;
      }
      ul li a {
        font-size: var(--rem-50);
        text-decoration: none;
        letter-spacing: 2px;
        line-height: 1em;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
      }
      ul li a::before {
        content: attr(data-text);
        position: absolute;
        color: var(--clr);
        width: 0;
        overflow: hidden;
        transition: 1s;
        border-right: 8px solid var(--clr);
        -webkit-text-stroke: 1px var(--clr);
      }
      ul li a:hover::before {
        width: 100%;
        filter: drop-shadow(0 0 25px var(--clr))
      }
    }
    &.parallax-hovering-7{
      .page__x {
        width: 1000px;
        height: 700px;
        /* 居中布局 */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /* 设置元素被查看位置的视图 */
        perspective: 1800px;
        /* 背景色（兼容性写法） */
        background: #642b73;
        background: linear-gradient(to bottom, #c6426e, #642b73);
      }

      /* Popular */
      h1 {
        /* 底部外边距 */
        margin-bottom: 30px;
        /* z轴偏移 */
        transform: translateZ(35px);
        /* 字母间距 */
        letter-spacing: -1px;
        /* 字号 */
        font-size: 32px;
        /* 字体粗细 */
        font-weight: 800;
        /* 字体颜色 */
        color: #3e3e42;
      }

      /* Movies */
      h3 {
        /* 底部外边距 */
        margin-bottom: 6px;
        /* z轴偏移 */
        transform: translateZ(25px);
        /* 字号 */
        font-size: 16px;
        /* 字体颜色 */
        color: #eb285d;
      }

      /* 卡片主容器 */
      .cards {
        /* 行内块元素 */
        display: inline-block;
        /* 最小宽度 */
        min-width: 595px;
        /* 内边距 */
        padding: 30px 35px;
        /* 设置元素被查看位置的视图 */
        perspective: 1800px;
        /* 旋转基点 */
        transform-origin: 50% 50%;
        /* 使被转换的子元素保留其 3D 转换 */
        transform-style: preserve-3d;
        /* 圆角 */
        border-radius: 15px;
        /* 文本左对齐 */
        text-align: left;
        /* 背景色 */
        background: #fff;
        /* 投影 */
        box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
      }

      /* 卡片 */
      .card {
        /* 行内块元素 */
        display: inline-block;
        /* 宽 */
        width: 175px;
        /* 高 */
        height: 250px;
        /* 相对定位 */
        position: relative;
        /* 隐藏溢出部分 */
        overflow: hidden;
        /* 设置元素被查看位置的视图 */
        perspective: 1200px;
        /* 使被转换的子元素保留其 3D 转换 */
        transform-style: preserve-3d;
        /* z轴偏移 */
        transform: translatez(35px);
        /* 过渡 */
        transition: transform 200ms ease-out;
        /* 文本居中对齐 */
        text-align: center;
        /* 圆角 */
        border-radius: 15px;
        /* 投影 */
        box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
      }

      /* 除了最后一个卡片之外的卡片 */
      .card:not(:last-child) {
        /* 右侧外边距 */
        margin-right: 30px;
      }

      /* 卡片的图片 */
      .card__img {
        /* 相对定位 */
        position: relative;
        /* 高度 */
        height: 100%;
      }

      /* 卡片背景 */
      .card__bg {
        bottom: -50px;
        left: -50px;
        position: absolute;
        right: -50px;
        top: -50px;
        /* 旋转基点 */
        transform-origin: 50% 50%;
        transform: translateZ(-50px);
        z-index: 0;
      }

      /* 幽灵公主 图片 */
      .princess-mononoke .card__img {
        top: 14px;
        right: -10px;
        height: 110%;
      }

      /* 幽灵公主 背景 */
      .princess-mononoke .card__bg {
        background: url(@/assets/images/3dr_monobg.jpg) center/cover no-repeat;
      }

      /* 千与千寻 图片 */
      .spirited-away .card__img {
        top: 25px;
      }

      /* 千与千寻 背景 */
      .spirited-away .card__bg {
        background: url(@/assets/images/3dr_spirited.jpg) center/cover no-repeat;
      }

      /* 哈尔的移动城堡 图片 */
      .howl-s-moving-castle .card__img {
        top: 5px;
        left: -4px;
        height: 110%;
      }

      /* 哈尔的移动城堡 背景 */
      .howl-s-moving-castle .card__bg {
        background: url(@/assets/images/3dr_howlbg.jpg) center/cover no-repeat;
      }

      /* 卡片的文本内容 */
      .card__text {
        /* 弹性布局 */
        display: flex;
        /* 主轴为垂直方向 */
        flex-direction: column;
        /* 主轴居中对齐 */
        justify-content: center;
        /* 交叉轴的中点对齐 */
        align-items: center;
        /* 宽 */
        width: 100%;
        /* 高 */
        height: 70px;
        /* 绝对定位 */
        position: absolute;
        /* 堆叠顺序 */
        z-index: 2;
        /* 离底部距离 */
        bottom: 0;
        /* 背景色：渐变 */
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.55) 100%);
      }

      /* 卡片的标题 */
      .card__title {
        /* 底部外边距 */
        margin-bottom: 3px;
        /* 设置左右10px内边距 */
        padding: 0 10px;
        /* 字号 */
        font-size: 18px;
        /* 字体的粗细 */
        font-weight: 700;
        /* 字体颜色 */
        color: #fff;
      }
    }
    &.parallax-hovering-8{
      --transition: 0.25s;
      --spark: 1.8s;
      --hue: 245;
      button {
        --cut: 0.1em;
        --active: 0;
        --bg:
          radial-gradient(
            120% 120% at 126% 126%,
            hsl(var(--hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
            transparent 50%
          ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
          radial-gradient(
            120% 120% at 120% 120%,
            hsl(var(--hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
            transparent 70%
          ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
          hsl(var(--hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
        background: var(--bg);
        font-size: var(--rem-20);
        font-weight: 500;
        border: 0;
        cursor: pointer;
        padding: var(--rem-20) var(--rem-50);
        display: flex;
        align-items: center;
        gap: 0.25em;
        white-space: nowrap;
        border-radius: var(--rem-20);
        position: relative;
        box-shadow:
          0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsl(var(--hue) 97% 61% / 0.5),
          0 0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
          0 -0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc(var(--active) * 10%)) inset;
        transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
        scale: calc(1 + (var(--active) * 0.1));
        transform-style: preserve-3d;
        perspective: 100vmin;
        overflow: hidden;
      }

      button:active {
        scale: 1;
      }

      .star {
        height: calc(var(--size) * 1px);
        aspect-ratio: 1;
        background: white;
        border-radius: 50%;
      /*  filter: blur(4px);*/
        position: absolute;
        opacity: var(--alpha);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px)) ;
        animation: orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear;
      }

      @keyframes orbit {
        to {
          transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px));
        }
      }

      .galaxy {
        position: absolute;
        width: 100%;
        aspect-ratio: 1;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        overflow: hidden;
        opacity: var(--active);
        transition: opacity var(--transition);
        /*transform-style: preserve-3d;
        perspective: 100vmin;*/
      /*  opacity: 0.25;*/
      }

      .galaxy__ring {
        height: 200%;
        width: 200%;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
        transform-style: preserve-3d;
      /*  background: red;*/
      }

      .galaxy__container {
        position: absolute;
        inset: 0;
        opacity: var(--active);
        transition: opacity var(--transition);
        mask: radial-gradient(white, transparent);
      }

      .star--static {
        animation: none;
        top: 50%;
        left: 50%;
        transform: translate(0, 0);
        max-height: 4px;
        filter: brightness(4);
        opacity: 0.9;
        animation:
          move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear,
          move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear;
      }

      button:hover .star--static {
        animation-play-state: paused;
      }

      @keyframes move-x {
        0% {
          translate: -100px 0;
        }
        100% {
          translate: 100px 0;
        }
      }

      @keyframes move-y {
        0% {
          transform: translate(0, -50px);
        }
        100% {
          transform: translate(0, 50px);
        }
      }

      .spark {
        position: absolute;
        inset: 0;
        border-radius: 2rem;
        rotate: 0deg;
        overflow: hidden;
        mask: linear-gradient(white, transparent 50%);
        animation: flip calc(var(--spark) * 2) infinite steps(2, end);
      }

      @keyframes flip {
        to {
          rotate: 360deg;
        }
      }

      .spark:before {
        content: "";
        position: absolute;
        width: 200%;
        aspect-ratio: 1;
        top: 0%;
        left: 50%;
        z-index: -1;
        translate: -50% -15%;
        rotate: 0;
        transform: rotate(-90deg);
        opacity: calc((var(--active)) + 0.4);
        background: conic-gradient(
          from 0deg,
          transparent 0 340deg,
          white 360deg
        );
        transition: opacity var(--transition);
        animation: rotate var(--spark) linear infinite both;
      }

      .spark:after {
        content: "";
        position: absolute;
        inset: var(--cut);
        border-radius: 2rem;
      }

      .backdrop {
        position: absolute;
        inset: var(--cut);
        background: var(--bg);
        border-radius: 2rem;
        transition: background var(--transition);
      }

      @keyframes rotate {
        to {
          transform: rotate(90deg);
        }
      }



      @supports(selector(:has(:is(+ *)))) {
        body:has(button:is(:hover, :focus-visible)) {
          --active: 1;
          --play-state: running;
        }
        .bodydrop {
          display: none;
        }
      }

      button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
        --active: 1;
        --play-state: running;
      }

      .bodydrop {
        background: hsl(
          260
          calc(var(--active) * 97%)
          6%
        );
        position: fixed;
        inset: 0;
        z-index: -1
      }



      button:is(:hover, :focus-visible) {
        --active: 1;
        --play-state: running;
      }


      .galaxy-button {
        position: relative;
      }

      @keyframes float-out {
        to {
          rotate: 360deg;
        }
      }

      .text {
        translate: 2% -6%;
        letter-spacing: 0.01ch;
        /*background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
        -webkit-background-clip: text;*/
        color: hsl(0 0% calc(60% + (var(--active) * 26%)));
      }

      button svg {
        inline-size: 1.25em;
        translate: -25% -5%;
      }
    }
  }


}

</style>
